import React, { Component } from 'react';
import './Middle.css'
//1 . 校验 props  属性值
import PropTypes from "prop-types"
class Middle extends Component {
    // 数据  状态
    // state = {
    //     middleArr:[
    //         {title:"html",position:"精通",checked:false},
    //         {title:"css",position:"熟练",checked:false},
    //         {title:"js",position:"了解",checked:false},
    //         {title:"jquery",position:"精通",checked:false},
    //         {title:"bootstarp",position:"熟练",checked:false},
    //         {title:"node.js",position:"精通",checked:false},
    //         {title:"express",position:"熟练",checked:false},
    //         {title:"react",position:"精通",checked:false},
    //         {title:"vue",position:"了解",checked:false},
    //         {title:"wechat",position:"熟练",checked:false}
    //     ]
    // }

    // uptateChecked=(i)=>{
    //     return ()=>{
    //         //获取state数据
    //         let newmiddleArr=this.state.middleArr;

    //         //修改checked
    //         newmiddleArr[i].checked=!newmiddleArr[i].checked;
    //         //修改state中的数据
    //         this.setState({
    //             middleArr:newmiddleArr
    //         })
    //     }
    // }

    //校验数据
    // 校验数据类型: string、bool、number、object、array、func还有element(react元素)
    //  必须传递:  isRequired
    //定义静态方法首字母必须小写
    static propTypes={
        //必须传入数组类,调用PropTYpes方法必须和导入定义的一样
        // mvArr:PropTypes.array.isRequired,
        middleArr:PropTypes.array.isRequired,
        checked:PropTypes.func.isRequired
    }
    //定义 props  默认数据
    static defaultProps={
        middleArr:[
            {title:"html",position:"精通",checked:false},
            {title:"css",position:"熟练",checked:false},
            {title:"js",position:"了解",checked:false},
            {title:"jquery",position:"精通",checked:false},
            {title:"bootstarp",position:"熟练",checked:false},
            {title:"node.js",position:"精通",checked:false},
            {title:"express",position:"熟练",checked:false},
            {title:"react",position:"精通",checked:false},
            {title:"vue",position:"了解",checked:false},
            {title:"wechat",position:"熟练",checked:false}
        ],
        // checked:uptateChecked=(i)=>{
        //     return ()=>{
        //         //获取state数据
        //         let newmiddleArr=this.state.middleArr;
    
        //         //修改checked
        //         newmiddleArr[i].checked=!newmiddleArr[i].checked;
        //         //修改state中的数据
        //         this.setState({
        //             middleArr:newmiddleArr
        //         })
        //     }
        // }
    }

    render() {
        //props 接收父组件传递的数据
        //children  接受组件体 内部的 数据标签中间的数据
        // console.log(this.props.children);

        //接收home组件中保存在props中的自定义属性的数据
        console.log(this.props);
        let {middleArr,checked}=this.props;

        //解构赋值
        // let {middleArr}=this.state;
        return (
            <div className='middle'>
                <ul>
                    {
                        middleArr.map((item,index)=>{
                            return <li key={index} onClick={checked(index)}>
                                <h1>{item.title}</h1>
                                {
                                    item.checked?<h2>{item.position}</h2> : null
                                }
                            </li>
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default Middle;